

Ext.require([
    'Ext.tip.QuickTipManager',
    'Ext.container.Viewport',
    'Ext.layout.*',
    'Ext.form.Panel',
    'Ext.selection.*',
    'Ext.tab.Panel'
]);

//
// This is the main layout definition.
//

Ext.onReady(function(){
 
    Ext.tip.QuickTipManager.init();

    tabPanel =  Ext.create('Ext.TabPanel', {
		enableTabScroll: true,
		region: "center",
		border:false,
		frame: true,
		autoWidth: true,
		defaults: {autoScroll:true} //如果内容超出范围,则自动出现滚动条
		//deferredRender:false //一次性将选项卡内容全部加载,不推荐
	});
	tabPanel.add({
		id: "tab1",
		title: "welcome",
		layout: "fit",
		autoLoad: {url: "welcome.html", scripts: true}
	});
 
    // Finally, build the main layout once all the pieces are ready.  This is also a good
    // example of putting together a full-screen BorderLayout within a Viewport.
    Ext.create('Ext.Viewport', {
        layout: 'border',
        title: 'Ext Layout Browser',
        items: [{
            xtype: 'box',
            id: 'header',
            region: 'north',
            html: '<h1>Small Office Automation</h1>',
            height: 40
        },{
            xtype: 'box',
            id: 'bottom',
            region: 'south',
            html: '<h1> 说明</h1>',
            height: 30
        },
        tabPanel
        ],
        renderTo: Ext.getBody()
    });
});



//定义打开选项的方法
	var openNewTab = function(id/*树节点ID,唯一标识选项卡*/, url/*点击节点后打开的页面地址*/, title/*标题*/){
		//根据ID获取tab对象
		
		var tab = tabPanel.down("#"+id);
		//判断tab是否已打开,如果已经打开,则不创建直接显示,否则显示
		if(tab){
			//已经打开,更新
			//获取更新器,并更新
			//tabPanel.getUpdater().update(url);
		}else{
			//没打开,则创建
			tab = tabPanel.add({
				title: title,
				layout: "fit",
				autoLoad: {url: url, scripts: true},
				closable: true, //关闭按钮 
				iconCls: "icon", //x-tree-node-icon
				id: id
			});
		}
		//将最新选项卡设置激活
		tabPanel.setActiveTab(tab);
	}
